<template>
  <!-- 用户信息填写 -->
  <view class="registerInfo">
    <view class="line">
      <text>姓名</text>
      <input
        type="text"
        placeholder="请输入你的姓名"
        placeholder-class="placeholder-style"
        v-model="realname"
      />
    </view>
    <view class="line">
      <text>身份证号码</text>
      <input
        placeholder="请输入你的身份证号码"
        placeholder-class="placeholder-style"
        v-model="identityCard"
        type="text"
      />
    </view>
    <view class="line">
      <text>手机号</text>
      <input
        type="text"
        v-model="telephoneNumber"
        placeholder="请输入你的手机号"
        placeholder-class="placeholder-style"
      />
    </view>
    <!-- 现居地址 -->
    <view class="line address">
      <text>现居地址</text>
      <picker @change="bindPickerChange" mode="region" class="flex-1">
        <view class="picker">
          <text :class="{ 'placeholder-style': !nowAddress }">{{
            nowAddress == "" ? "请选择地址" : nowAddress
          }}</text>
          <image src="/static/other/gengduo.svg" mode="" />
        </view>
      </picker>
    </view>
    <!-- 现居详细地址 -->
    <view class="line">
      <text>详细地址</text>
      <input
        type="text"
        placeholder="请输入详细地址"
        placeholder-class="placeholder-style"
        v-model="detailAddress"
      />
    </view>
    <!-- 疫苗人群分类 -->
    <view class="line Category">
      <text>疫苗人群分类</text>
      <picker
        @change="CategoryPickerChange"
        mode="selector"
        class="flex-1"
        :range="Category_data"
      >
        <view class="picker">
          <text :class="{ 'placeholder-style': !category }">{{
            category == "" ? "请选择疫苗人群分类" : category
          }}</text>
          <image src="/static/other/gengduo.svg" mode="" />
        </view>
      </picker>
    </view>
  </view>
  <!-- 接种疫苗的地址 -->
  <view class="vaccination-address order-block">
    <view class="top-block">{{ Hospital_data.Hospital }}</view>
    <view class="Hospital-address">{{ Hospital_data.address }}</view>
    <view class="Hospital-title">
      <text
        v-for="(item, index) in Hospital_data.company"
        :key="index"
        class="title-block"
      >
        {{ item }}
      </text>
    </view>
  </view>
  <!-- 疫苗预约日期安排 -->
  <view class="orderDay order-block">
    <view
      v-for="(item, index) in Hospital_data.week"
      :key="index"
      class="time-block-class"
      @click="changeDay(index, item.date)"
      :class="{ selectClass: dayIndex === index }"
    >
      <view>{{ item.day }}</view>
      <view>{{ item.date }}</view>
      <view>{{ item.Have }}</view>
    </view>
  </view>
  <!-- 预约时间 -->
  <view
    v-for="(item, index) in Hospital_data.lasting"
    :key="index"
    class="orderTime order-block"
  >
    <view class="top-block">{{ item.period }}</view>
    <view class="time_detail_wrap">
      <view
        class="time_detail"
        v-for="(subitem, i) in item.time"
        :key="i"
        @click="
          changeTime(
            i,
            index,
            item.period,
            subitem.start_time,
            subitem.end_time,
            subitem.when
          )
        "
        :class="{ selectClass: timeIndex === `${index}` + `${i}` }"
      >
        <view>{{ subitem.start_time }}~{{ subitem.end_time }}</view>
        <view>剩余:{{ subitem.over }}</view>
      </view>
    </view>
  </view>
  <view style="height: 170rpx"></view>
  <view class="submit">
    <text @click="Cancel">取消</text>
    <text @click="subMit">提交预约</text>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, toRefs } from "vue";
import apiRequest from "~/api/index.js";
import bottomButton from "~/components/bottomButton/bottomButton.vue";
const form_data = reactive({
  realname: "",
  identityCard: "",
  telephoneNumber: "",
  nowAddress: "",
  detailAddress: "",
  category: "",
});

// 解构
const {
  realname,
  identityCard,
  telephoneNumber,
  nowAddress,
  detailAddress,
  category,
} = toRefs(form_data);

// 三级联动框获取地址
const bindPickerChange = (e) => {
  // 数组去重
  let address = [...new Set(e.detail.value)];
  nowAddress.value = address.join(" ");
};

// 疫苗人群分类
const Category_data = ref([
  "医疗卫生人员",
  "卫生系统内工作的其他人员",
  "因公出国人员",
  "对外劳务派遣人员",
  "留学生",
  "因私出国人员",
  "海关边检人员",
  "公安系统,消防人员",
  "党政机关,事业单位人员",
  "社区工作者",
  "教育工作者",
  "小学和中学学生",
  "其他人员",
]);

// 人群分类picker改变事件
const CategoryPickerChange = (e) => {
  category.value = Category_data.value[e.detail.value];
};

// 医院信息
const Hospital_data = ref([]);
onMounted(async () => {
  // 时间段
  const res = await apiRequest.NewappTime();
  Hospital_data.value = res.data[0];
  console.log("Hospital_data", Hospital_data.value);
});

// 选择日期与具体时间
const dayIndex = ref(null);
const timeIndex = ref("1");
function changeDay(index, date) {
  dayIndex.value = index;
  submit_data.date = date;
}
const changeTime = (index, pIndex, period, start_time, end_time, when) => {
  timeIndex.value = `${pIndex}` + `${index}`;
  submit_data.period = period;
  submit_data.reserve_time = start_time + "-" + end_time;
  submit_data.when = when;
};
function Cancel() {
  uni.navigateBack({
    delta: 1,
  });
}
async function subMit() {
  uni.showLoading({ title: "提交中", mask: true });
  const res = await apiRequest.RescoVid(submit_data);
  if ((res.msg = "提交成功")) {
    uni.hideLoading();
    uni.navigateTo({ url: '/pages/submit-success/vacc-order/index' });
  }
  console.log(res);
}

const submit_data = reactive({
  name: realname,
  id_card: identityCard,
  phone: telephoneNumber,
  address: nowAddress,
  de_address: detailAddress,
  crowd_sort: category,
  date: "",
  period: "",
  reserve_time: "",
  when: 0,
});
</script>

<style scoped>
@import url("../../common-style/form.css");
.registerInfo {
  margin: 0 20rpx;
  @apply bg-light-50;
}
.line {
  height: 100rpx;
  @apply flex;
  align-items: center;
  border-bottom: 1px solid #dbd7d7;
}
.line text {
  margin-left: 20rpx;
}
.line input {
  @apply text-right;
  padding: 10rpx;
  flex: 1;
}
.line .address image {
  width: 50rpx;
  height: 50rpx;
}
view /deep/.placeholder-style {
  @apply text-gray-400;
}
.address image,
.Category image {
  width: 50rpx;
  height: 50rpx;
  text-align: right;
}
.picker {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
}
.top-block {
  @apply font-bold;
  font-size: 36rpx;
}
.title-block {
  display: inline-block;
  padding: 2px;
  @apply bg-gray-200;
  border-radius: 10rpx;
  font-size: 25rpx;
  margin-right: 10rpx;
}
.order-block {
  margin: 20rpx;
  padding: 20rpx;
  @apply bg-light-50 flex flex-col;
  height: 200rpx;
  justify-content: space-between;
}
.orderDay > view {
  @apply bg-gray-200 flex flex-col;
  justify-content: space-around;
  height: 100%;
  box-sizing: border-box;
  width: 150rpx;
  align-items: center;
  border-radius: 20rpx;
}
/* morning */
.orderTime .time_detail_wrap {
  @apply flex;
  align-items: center;
}
.orderTime .time_detail {
  @apply flex flex-col bg-gray-200;
  align-items: center;
  padding: 10rpx;
  border-radius: 20rpx;
  margin-right: 20rpx;
}
.last {
  margin-bottom: 200rpx;
}
.sumbit {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
